<template>
    <div>
            <quill-editor
                v-model="content"
                ref="myQuillEditor"
                :options="editorOption"
                @blur="onEditorBlur($event)"
                @focus="onEditorFocus($event)"
                @ready="onEditorReady($event)"
                @change="onEditorChange($event)">
            </quill-editor>

    </div>
</template>

<script>
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

import {quillRedefine} from 'vue-quill-editor-upload'
import Quill from 'quill'
import ImageResize from 'quill-image-resize-module'
Quill.register('modules/imageResize', ImageResize)
// 工具栏配置
const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike'],
    ['blockquote', 'code-block'],
    [{ 'header': 1 }, { 'header': 2 }],
    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
    [{ 'script': 'sub' }, { 'script': 'super' }],
    [{ 'indent': '-1' }, { 'indent': '+1' }],
    [{ 'direction': 'rtl' }],
    [{ 'color': [] }, { 'background': [] }],
    [{ 'align': [] }],
    ['link', 'image', 'video'],
    ['clean']
]

export default {
    name: 'QuillEditor',
    components: {
        quillEditor,quillRedefine
    },
    props: {
        // 表单校验用字段
        // eslint-disable-next-line
        value: {
            type: String
        }
    },
    data () {
        return {
            content: null,
            editorOption: {
            },
            uploadUrl: '',

        }
    },
    created() {
        this.uploadUrl = this.$api.imageUpload;

        this.editorOption = quillRedefine({
            uploadConfig: {
                action: this.uploadUrl,
                name: 'file',
                res: (response) => {
                    return response.data.url;

                },
                placeholder: "请输入简介",

            },
            imageResize: {
                displayStyles: {
                    backgroundColor: 'black',
                    border: 'none',
                    color: 'white'
                },
                modules: [ 'Resize', 'DisplaySize', 'Toolbar' ]
            }

        });
    },
    methods: {
        //验证图片
        beforeUpload (file) {
            const isImg = file.type === 'image/jpeg' || file.type === 'image/gif' || file.type === 'image/png' || file.type === 'image/bmp'
            if (!isImg) {
                this.$message.error('只能上传图片文件!')
                return false
            }
            const isLt3M = file.size / 1024 / 1024 < 3
            if (!isLt3M) {
                this.$message.error('上传图片必须小于3MB!')
                return false
            }
            this.spinning = true
            return true
        },
        //上传图片的回调函数
        handleUpload (callback) {
            const response = callback.file.response
            if (response) {
                const quill = this.$refs.myQuillEditor.quill
                if (response.status === 10000) {
                    this.imageUrl = response.data[0]
                    // 获取光标所在位置
                    const length = quill.getSelection().index
                    // 插入图片  res.info为服务器返回的图片地址
                    quill.insertEmbed(length, 'image', this.imageUrl)
                    // 调整光标到最后
                    quill.setSelection(length + 1)
                } else {
                    this.$notification.error({
                        message: '上传失败',
                        description: response.message
                    })
                }
            }
        },
        onEditorBlur (quill) {
            // console.log('editor blur!', quill)
        },
        onEditorFocus (quill) {
            // console.log('editor focus!', quill)
        },
        onEditorReady (quill) {
            // console.log('editor ready!', quill)
        },
        //修改富文本
        onEditorChange ({ quill, html, text }) {
            //console.log('editor change!', quill, html, text)
            this.$emit('change', html)
        }
    },
    //监听文本变化
    watch: {
        value (val) {
            this.content = val
            console.log(this.content)
        }
    }
}
</script>


